<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <!-- <div class="zhezhao">
    </div> -->

    <div style="position: absolute;top: 100px; left: 100px;z-index: 10;">
    <button>
      fdgdfgdf
    </button>
    </div>
  </div>
</template>

<script>

import startmixins from './startmixins'

function createEarth(comp) {
  // 1.1.1 创建地球
  var earth = new XE.Earth(comp.$refs.earthContainer);

  // 1.1.2 添加默认地球影像
  earth.sceneTree.root = {
    children: [
      {
        czmObject: {
          name: "默认离线影像",
          xbsjType: "Imagery",
          xbsjImageryProvider: {
            createTileMapServiceImageryProvider: {
              url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
              fileExtension: "jpg"
            },
            type: "createTileMapServiceImageryProvider"
          }
        }
      }
    ]
  };

  comp._earth = earth;

  // 仅为调试方便用
  window.earth = earth;
}

function createCesium(comp) {
  window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
}

// 1 创建Earth的vue组件
var EarthComp = {
  mixins: [startmixins],
  data() {
    return {
      message: "页面加载于 " + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== 'undefined') {
      createEarth(this);
      this.earthopt()
    } else if (typeof Cesium !== 'undefined') {
      createCesium(this);
    }
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};

export default EarthComp;
</script>
<style scoped>
.zhezhao{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/bg.png);
  background-size: 100% 100%;
  top: 0px;
  left: 0px;
  pointer-events: none;
}
</style>